<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>转圈</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 2px solid blue;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<input type="button" name="zq" id="zq" value="转圈" />
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			console.dir(oCanvas);
			let oPen = oCanvas.getContext("2d");
			let oZq=document.getElementById('zq');
			var x=0;y=0;b=1;
			oZq.onclick=function(){
				setInterval(()=>{zhuan()},100);
			}
			function zhuan(){
				var s=50;
					oPen.clearRect(0,0,500,500);
					if(b==1){
						if(x+s>=400){s=400-x;};
						if(x==400){b=2};
						x=x+s;
						oPen.translate(s,0);
					}
					if(b==2){
						if(y+s>=400){s=400-y;};
						if(y==400){b=3};
						y=y+s;
						oPen.translate(0,s);	
					}
					if(b==3){
						if(x-s<=0){s=x;};
						if(x==0){b=4};
						x=x-s;
						oPen.translate(-s,0);	
					}
					if(b==4){
						if(y-s<=0){s=y;};
						if(y==0){b=1};
						y=y-s;
						oPen.translate(0,-s);	
					}
					console.dir(x);
					oPen.fillRect(0,0,100,100);
			}
		}
	</script>
	</body>

</html>